import { ref, Ref } from 'vue'

export default (popupIndex: Ref<number>) => {
  const topStyle = ref('0')
  const teleportData = ref([])

  async function handleTeleport(i: number) {
    if (!i) return
    if (popupIndex.value === i) {
      popupIndex.value = -1
      return
    }
    const insName = `tab-item_popup_${i}`
    const dom = document.getElementsByClassName(insName)[0]
    const { top, height } = dom.getBoundingClientRect()
    topStyle.value = `${top + height}px`
    popupIndex.value = i
  }

  return {
    topStyle,
    teleportData,
    handleTeleport,
  }
}
